<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>文本属性-overflow属性值详解</title>

    <style>
        /*文本属性默认是visible ，也就是文本内容会超出*/
        .visible{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow: visible;
            margin-bottom: 30px;
        }

        /*显示滚动条*/
        .scroll{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 30px;
            overflow: scroll;
        }

        /*如果文本超出大小，那么就会自动添加上滚动条，否则不添加*/
        .auto{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 30px;
            overflow: auto;
        }

        /*超出的文本内容会被截断*/
        .hidden{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow: hidden;
            margin-bottom: 30px;
        }

        /*text-overflow 溢出的文字处理方式*/

        /* text-overflow 不能单独设置,要配合  overflow: hidden; 使用*/
        /*效果跟上一个一样*/
        .clip{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 30px;
            text-overflow: clip;
            overflow: hidden;
        }

        /* 不能单独设置,要与 overflow: hidden;配合使用 */
        /* ellipsis 超出部分会以省略号的形式显示*/
        .ellipsis{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
            /*针对中文自动换行,必须设置内容同一行才能显示省略号 也就是说中文和英文都在同一行*/
            white-space: nowrap;
        }

        /*white-space 设置文本是否在同一行显示*/
        ul p{
            width: 100px;
            border: 1px solid red;
        }

        .normal>p{
            /*中文自动换行*/
            white-space: normal;
        }

        .pre > p{
            /*作用类似于pre标签,就是标签中什么格式,就显示什么格式*/
            white-space: pre;
        }

        .pre-wrap >p {
            /*在pre的标签基础上增加了中文自动换行       结合了 pre 和 wrap 的行为 */
            white-space: pre-wrap;
        }

        .pre-line{
            /*保留源文本的空白符和换行符，但是连续的换行符会被合并，文本会自动换行*/
            white-space: pre-line;
        }

        .nowarp{
            /*不换行，保持文本在同一行，保留空格符*/
            white-space: nowrap;
        }



    </style>


</head>
<body>


<div class="visible">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    我是div标签中间的内容，我不知道会不会超出元素的大小
</div>

<div class="scroll">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    我是div标签中间的内容，我不知道会不会超出元素的大小
</div>

<div class="auto">

    我不会超出元素的大小
</div>

<div class="hidden">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    我是div标签中间的内容，我不知道会不会超出元素的大小
</div>

<div class="clip">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    我是div标签中间的内容，我不知道会不会超出元素的大小
</div>

<div class="ellipsis">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    我是div标签中间的内容，我不知道会不会超出元素的大小
</div>

<ul>
    <li class="normal">
        <p>我是第一个P标签，我来测试normal aaaaaa</p>
    </li>
    <li class="pre">
        <p>我是第二个P标签
            我来测试pre属性值
        </p>
    </li>
    <li class="pre-wrap">
        <p>
            我是第三个      p标签
            我来测试  pre-wrap
        </p>
    </li>
    <li class="pre-line">
        <p>我是第四个      p标标签
            我来测试 pre-line
            hello
        </p>
    </li>
    <li class="nowarp">
        <p>我是第五个P标签
            我来测试的是nowarp
        </p>
    </li>
</ul>



</body>
</html>